<template>
  <div class="grid_cont">
    <div style="display:flex;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 16px;line-height: 16px;">详情</div>
    </div>
    <div style="width: 100%;height: 1px;background-color:rgba(245,245,245,1);margin-top:16px;margin-bottom:30px;">
    </div>
    <el-form v-loading="loading" element-loading-text="Loading..." :model="formParams" style="margin-left:14px;">
      <el-form-item label="归属区域：" prop="area">
        <el-input disabled v-model="formParams.area" style="width: 320px;" />
      </el-form-item>
      <el-form-item label="户主：" prop="user" style="margin-left:28px;">
        <el-input disabled v-model="formParams.user" style="width: 320px;" />
      </el-form-item>
      <el-form-item label="房号：" prop="houseNumber" style="margin-left:28px;">
        <el-input disabled v-model="formParams.houseNumber" style="width: 320px;" />
      </el-form-item>
      <el-form-item label="房屋类型：" prop="houseType">
        <el-input disabled v-model="formParams.houseType" style="width: 320px;" />
      </el-form-item>
      <el-form-item label="位置：" prop="location" style="margin-left:28px;">
        <el-input disabled v-model="formParams.location" style="width: 320px;" placeholder="暂无" />
      </el-form-item>
    </el-form>
  </div>
  <div class="grid_cont2">
    <el-button class="grid_btn" @click="detailsbtn">返回</el-button>
  </div>
</template>

<script lang="ts" setup>
const { push } = useRouter() // 路由
const route = useRoute()
import * as getgridApi from '@/api/countryside/gridmanagement/index'
const formParams = reactive({
  area: '',
  user: '',
  houseNumber: '',
  houseType: '',
  location: ''
})
const loading = ref(true) // 列表加载中
/** 返回 */
const detailsbtn = () => {
  push({
    name: 'houseManagement',
  })
}
const treeData = ref()
const getData = () => {
  treeData.value = []
  getgridApi.getGridList().then((res) => {
    treeData.value = res
    getgridApi.getHousedetail(route.query.id).then(async (res) => {
      loading.value = false
      await treeData.value.forEach((t) => {
        if (t.id == res.gridBelonged) {
          formParams.area = t.gridName
        }
      })
      formParams.user = res.houseHolder
      formParams.houseNumber = res.houseNumber
      formParams.houseType = res.houseType
      formParams.location = res.location

    }).catch((error) => {
      loading.value = false
    })
  })
}

onMounted(() => {
  getData()
})

</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  height: 65px;
  justify-Content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
  background-color: #FF9900;
  border: none;
  color: #fff;
}

.grid_btn:hover {
  opacity: 0.8;
}
</style>